<template>

    <div ref="systemContainerRef" class="fixed top-[180px] w-full h-[36px] flex justify-center opacity-0" v-if="systemlist.length > 0">
        <div class="cursor-pointer" v-out-side="clickOutSide">
            <div @click="showMenu"
                class="w-[736px] flex items-center justify-center h-full bg-[linear-gradient(90deg,rgba(0,0,0,0)_0%,#103B68_50%,rgba(0,0,0,0)_100%)] ">
                <div class="mr-[10px] text-[14px] text-[#fff] font-medium">{{ isNullOrEmpty(systemNameOne) }}-- {{
                    isNullOrEmpty(systemName) }} </div>
                <el-icon class="arrow" :class="rotate ? 'rotatefresh' : ''">
                    <ArrowDown />
                </el-icon>
            </div>

            <!-- bottom -->
            <div ref="systemTwoContainerRef" class="systemTwoContainer w-[736px] flex items-center justify-center opacity-0"  v-if="rotate">
                <div class="w-[442px] h-[290px]   mt-[10px] bg-[rgba(13,44,83,0.8)] flex ">
                    <!-- 左 -->
                    <div class="flex-1 px-[20px] overflow-y-scroll overflow-hidden  py-[20px]">
                        <div class=" cursor-pointer" v-for="(item, index) in systemlist" :key="index"
                            @click="selectMenu(item, index)">
                            <div class="flex h-[14px]">
                                <div class="alltexts  text-[14px] text-[#fff] font-medium"
                                    :class="selectIndex == item.systematicId ? 'opacity-100' : 'opacity-60'">{{
                                    isNullOrEmpty(item.systematicName) }}</div>
                                <el-icon v-if="selectIndex == item.systematicId" color="#fff ">
                                    <CaretRight />
                                </el-icon>
                                <el-icon v-else color="#A7AAAE">
                                    <CaretRight />
                                </el-icon>
                            </div>
                            <div v-if="selectIndex == item.systematicId"
                                class="pt-[1px] bg-[linear-gradient(90deg,#FFFFFF_0%,rgba(255,255,255,0)_100%)] my-[8px] ">
                            </div>
                            <div v-else class="pt-[1px]  my-[8px] ">
                            </div>
                        </div>
                    </div>
                    <!-- 中 -->
                    <div style="border: 1px solid #2A4765;"></div>
                    <!-- 右 -->
                    <div class="flex-1 px-[20px] overflow-y-scroll overflow-hidden  my-[20px]">
                        <div class=" cursor-pointer" v-for="(item, index) in systemlistson" :key="index"
                            @click="selectMenutwo(item, index)">
                            <div class="flex">
                                <div class="alltexts h-[14px] text-[14px] text-[#fff] font-medium"
                                    :class="selectIndextwo == item.systematicId ? 'opacity-100' : 'opacity-60'">
                                    {{ isNullOrEmpty(item.systematicName) }}</div>
                            </div>
                            <div class="h-[1px]  my-[8px]">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
    <!-- <div class="fixed top-[180px] left-[570px]" v-if="systemlist.length > 0">
        <div class="flex justify-center  flex-col    items-center ">
            <div class="">
                <div class="w-[298px]">
                    <div @click="showMenu" class="w-[298px] gap-[20px] h-[46px] head cursor-pointer pl-[14px] flex items-center justify-between">
                        <div class="line-clamp-1 whitespace-normal break-all">{{ isNullOrEmpty(systemName) }}</div>
                        <div :class="rotate ? 'rotatefresh' : ''"
                            class="arrow bg-[#45526E] w-[24px] h-[24px] rounded-[50%] mr-[10px] flex justify-center items-center">
                            <el-icon>
                                <CaretRight />
                            </el-icon>
                        </div>
                    </div>
                    <div class="flex h-[300px] mt-[4px] alltext textStyle font-bold bg-[#262D38]" v-if="rotate">
                        <div class="count overflow-auto w-[146px] px-[18px] pt-[6px] pb-[24px]">
                            <div v-for="(item, index) in systemlist" :key="index" @click="selectMenu(item, index)">
                                <div class="flex items-start gap-[5px] justify-between pt-[18px] cursor-pointer">
                                    <div class="line-clamp-1 whitespace-normal break-all" style="" :class="selectIndex == item.systematicId ? 'opacity-100' : 'opacity-60'">
                                        {{ isNullOrEmpty(item.systematicName) }}

                                    </div>
                                    <div class="w-[4px] h-[8px] ">
                                        <el-icon>
                                            <CaretRight />
                                        </el-icon>
                                    </div>
                                </div>
                                <div v-if="selectIndex == item.systematicId" class="borser">
                                </div>
                                <div v-else class="mt-[18px] h-[1px]">
                                </div>
                            </div>
                        </div>
                        <div class="count overflow-auto w-[172px] px-[18px] pt-[6px] pb-[24px] ml-[1px]">
                            <div v-for="(item, index) in systemlistson" @click="selectMenutwo(item, index)">
                                <div class="flex items-center gap-[10px]  cursor-pointer" :class="index == 0 ?'pt-[18px]':'pt-[0px]'">
                                    <div class="flex items-center mr-[0px]">
                                        <img v-if="selectIndextwo == item.systematicId"
                                            src="@/assets/screenimg/prej1@2x.png" class="w-[17px] h-[4px]" />
                                        <img v-else src="@/assets/screenimg/prej2@2x.png" class="w-[17px] h-[4px]" />
                                    </div>
                                    <div class="textStyle" style=""  :class="selectIndextwo == item.systematicId ? 'opacity-100' : 'opacity-60'">
                                        {{ isNullOrEmpty(item.systematicName) }}
                                    </div>
                                </div>
                                <div class="mt-[18px] h-[1px]"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div> -->
</template>
<script setup lang="ts">
import { isNullOrEmpty } from '@/utils/functions'
import { usePageReloadStoreHook } from "@/store/modules/pageReload";
import { systematic, systematicson } from "@/api/screen/screenmune"
import { CaretRight, ArrowDown } from '@element-plus/icons-vue'
import { useDataDashboardThemeStoreHook } from '@/store/modules/data-dashboard-theme'
import {useToggleAnimate} from "@/views/large-data-screen/useToggleAnimate";
const useDataDashboardThemeStore = useDataDashboardThemeStoreHook()
const rotate = ref(false)
const selectIndex = ref()  //一级菜单index
const selectIndextwo = ref()  //二级菜单index
const systemlist = ref([])  //一级系统列表
const systemlistson = ref([])  //二级系统列表
const systemName = ref('')
const channel = ref(null)
const systemContainerRef = ref()
const systemTwoContainerRef = ref()

onMounted(() => {
    getsystemlist()
})
onBeforeMount(() => {
    channel.value = new BroadcastChannel('data-dashboard-them')

})
onUnmounted(() => {
    channel.value.close();
})
//获取系统列表
function getsystemlist() {  //一级菜单
    systematic().then(res => {
        if (res.code == 200) {
            console.log("1级", res);
            systemlist.value = res.result
            selectIndex.value = res.result[0].systematicId
            systemNameOne.value = res.result[0].systematicName
            getsonlist(res.result[0].systematicId, 1)
        }
        nextTick(() => {
          useToggleAnimate().systemMotionOne(systemContainerRef.value)
        })
    })
}
function getsonlist(id, type) {  //二级菜单
    systemlistson.value = []
    systematicson({ systematicId: id }).then(res => {
        if (res.code == 200) {
            res.result.unshift({
                    systematicName: '全部',
                    systematicId: id,
                    all: 1
                });
            res.result.forEach(e => {
                if(e.systematicName != '全部'){
                    e.all = 0
                }

            });
            systemlistson.value = res.result
            if (type == 1) {
                selectIndextwo.value = res.result[0].systematicId
                systemName.value = res.result[0].systematicName
                useDataDashboardThemeStore.CHANGE_SETTING({ key: "systematicId", value: res.result[0]?.systematicId, })
                useDataDashboardThemeStore.CHANGE_SETTING({ key: "all", value: 1, })
                channel.value.postMessage({ key: 'systematicId', value: res.result[0]?.systematicId, type: 'systematicId' });

            }
        }
    })
    setTimeout(()=>{
        console.log(useDataDashboardThemeStore.all,);

    })
}
//点击箭头旋转
const showMenu = () => {
    if(!rotate.value) {
      rotate.value = !rotate.value
      nextTick(() => {
        useToggleAnimate().animeVisible(".systemTwoContainer", true)
      })
    }else {
      useToggleAnimate().animeVisible(".systemTwoContainer", false, () => {
        rotate.value = false
      })
    }
}
//点击一级菜单
const systemNameOne = ref('')
const selectMenu = (item, index) => {
    selectIndex.value = item.systematicId
    systemNameOne.value = item.systematicName
    getsonlist(item.systematicId, 2)
}

//点击2级菜单
const selectMenutwo = (item, index) => {
    // selectIndextwo.value = index
    selectIndextwo.value = item.systematicId
    systemName.value = item.systematicName
    // console.log('点击全部',item);

    useDataDashboardThemeStore.CHANGE_SETTING({ key: "systematicId", value: item?.systematicId })
    useDataDashboardThemeStore.CHANGE_SETTING({ key: "all", value: item?.all, })
    channel.value.postMessage({ key: 'systematicId', value: item?.systematicId, type: 'systematicId' });
}
const clickOutSide=()=>{
    console.log('sss');

    rotate.value = false
}
</script>
<style lang="scss" scoped>
.alltexts {
    -webkit-line-clamp: 1;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;

}

.borser {
    height: 1px;
    margin-top: 16px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 50%, rgba(255, 255, 255, 0) 100%);
}

.textStyle {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;


}

.rotatefresh {
    transform: rotate(180deg);
}

.arrow {
    // 动画
    transition: all 0.5s;
}

/*
@keyframes moveLeft {
    from {
        transform: translateY(-100%);
        opacity: 0.5;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes moveLefts {
    from {
        transform: translateY(0);
        opacity: .5;
    }

    to {
        transform: translateY(-466px);
        opacity: 0;
    }
}

.anmete {
    animation: moveLeft 1s;
    animation-fill-mode: forwards;
}

.anmetes {
    animation: moveLefts 1s;
    animation-fill-mode: forwards;
}
*/

::-webkit-scrollbar {
    /* 隐藏滚动条 */
    display: none;
}

.count {


    background: #0C2740;
    box-shadow: 0px 12px 2px 0px rgba(3, 17, 30, 0.48);
    border-radius: 2px;
    border: 2px solid;
    border-image: linear-gradient(0deg, rgba(0, 104, 147, 0.32), rgba(0, 104, 147, 0.32)) 2 2;
}

.head {
    background: linear-gradient(90deg, #0C2740 0%, #05192C 100%);
    border-radius: 5px;
    border: 1px solid #46556F;
}
</style>
